<template>
    <view>
        <u-sticky>
            <view class="cu-list menu sm-border">
                <view class="cu-item">
                    <view class="content">
                    <text class="text-black text-xl">PY2019010007-CD2</text>
                    </view>
                    <view class="action">
                    <text class="text-black text-xl">重庆雅恒房地产开发有限公司给水工程裁断</text>
                    </view>
                </view>
            </view>
        </u-sticky>
        <view class="cu-card">
            <!-- @click="add(item)" -->
            <view class="cu-item shadow"  v-for="(item,index) in zhengGaiData" :key="item.zhengGaiId">
                <view class="cu-form-group">
                    <view class="title">申请人</view>
                    <view>{{ item.applicant }}</view>
                </view>
                <view class="cu-form-group">
                    <view class="title">申请时间</view>
                    <view>{{ item.applicantTime }}</view>
                </view>
                <!-- <view class="cu-form-group">
                    <view class="title">申请附件</view>
                </view>
                <view class="padding">
                    <view class="cu-list col-1 " v-for="ele in item.applyFile" :key="ele.name">
                        <view 
                        v-if="ele.type.endsWith('jpg') || ele.type.endsWith('png') || ele.type.endsWith('jpeg')" 
                        @click="ViewImage(item.applyFile,$event)">
                        {{ ele.name }}
                    </view>
                    <view v-else @click="openDocument(ele)">{{ ele.name }}</view>
                    </view>
                </view> -->
                <!-- <view class="cu-form-group" style="min-height: 0;"></view> -->
                <view class="cu-form-group">
                    <view class="title">施工单位</view>
                    <view>{{ item.unitName }}</view>
                </view>
                <view class="cu-form-group">
                    <view class="title">施工单位联系人</view>
                    <view>{{ item.unitPerson }}</view>
                </view>
                <view class="cu-form-group">
                    <view class="title">施工单位联系电话</view>
                    <view>{{ item.unitTel }}</view>
                </view>
                <view class="cu-form-group">
                    <view class="title">采样地址</view>
                    <view>{{ item.unitAddress }}</view>
                </view>
                <view class="cu-form-group">
                    <view class="title">备注</view>
                    <view>{{ item.remark }}</view>
                </view>
                <view class="cu-form-group light bg-grey">
                    <view class="title">检测结果</view>
                    <view>{{ item.result }}</view>
                </view>
                <view class="cu-form-group light bg-grey">
                    <view class="title">检测报告评价</view>
                    <view>{{ item.evaluation }}</view>
                </view>
                <view class="cu-form-group light bg-grey">
                    <view class="title">检测上传时间</view>
                    <view>{{ item.resultTime }}</view>
                </view>
                <!-- <view class="cu-form-group">
                    <view class="title">检测文件</view>
                    <view>{{ item.reportFile }}</view>
                </view> -->
                <view class="cu-bar btn-group">
                    <button class="cu-btn bg-blue shadow-blur" @click="addDetail(item.applyFile)">查看申请附件</button>
                    <button class="cu-btn text-green line-green shadow" @click="addDetail(item.applyFile)">检测文件</button>
                </view>
            </view>
            
            
        </view>
        <add-detail :modalNameDetail="modalNameDetail" @modalNameDetailEmit="modalNameDetailEmit" v-if="showAddDetail" :applyFile="applyFile"></add-detail>
    </view>
</template>
<script>
import addDetail from './addDetail.vue'

  export default{
  components: { addDetail },
    data(){
        return{
            imgList: ["http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg","http://192.168.1.49:8080/app/static/image/zfgs/zfgs2.jpg"],
            zhengGaiData:[
                {
                    xiangMuName:'重庆雅恒房地产开发有限公司给水工程裁断',
                    xiangMuCode:'PY2019010007-CD2',
                    zhengGaiId:1,
                    applicant:'鄢廷均(联兴)',
                    applicantTime:'2024-03-13',
                    applyFile:[{
                        url:'http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg',
                        name: "图片附件.jpg",
                        type:"image/jpeg"
                    },{
                        url:'http://192.168.1.49:8080/app/static/image/zfgs/ltc.pdf',
                        name: "架构.pdf",
                        type:"application/pdf"
                    },{
                        url:'http://192.168.1.49:8080/app/static/image/zfgs/Desktop.rar',
                        name: "Desktop.rar",
                        type:"application/pdf"
                    }],
                    unitName:'四川联兴建筑工程有限公司',
                    unitPerson:'鄢廷均',
                    unitTel:'13996148837',
                    unitAddress:'鸳鸯街道黄环北路DN400给水管道迁改工程',
                    remark:'',
                    // 检测结果
                    result:'通过',
                    // 检测报告评价
                    evaluation:'符合要求',
                    // 检测时间
                    resultTime:'2024-03-13 12:00:00',
                    // 检测文件
                    reportFile:'https://www.baidu.com',  
                    
                },
                {
                    xiangMuName:'重庆雅恒房地产开发有限公司给水工程裁断',
                    xiangMuCode:'PY2019010007-CD2',
                    zhengGaiId:2,
                    applicant:'谭家勤（福开）',
                    applicantTime:'2024-03-13',
                    unitName:'重庆福开建设工程有限公司',
                    unitPerson:'鄢廷均',
                    unitTel:'13996148837',
                    unitAddress:'鸳鸯街道黄环北路DN400给水管道迁改工程',
                    remark:'',
                    // 检测结果
                    result:'通过',
                    // 检测报告评价
                    evaluation:'符合要求',
                    // 检测时间
                    resultTime:'2024-03-13 12:00:00',
                    // 检测文件
                    reportFile:'https://www.baidu.com',
                    applyFile:[{
                        url:'http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg',
                        name: "图片附件.jpg",
                        type:"image/jpeg"
                    },{
                        url:'http://192.168.1.49:8080/app/static/image/zfgs/ltc.pdf',
                        name: "架构.pdf",
                        type:"application/pdf"
                    },{
                        url:'http://192.168.1.49:8080/app/static/image/zfgs/Desktop.rar',
                        name: "Desktop.rar",
                        type:"application/pdf"
                    }]
                }
            ],
            modalNameDetail:null,
            applyFile:[],
            showAddDetail:false,
        }
    },
    methods:{

        ViewImage(imageList,e) {
            // 阻止冒泡
            e.stopPropagation();
            uni.previewImage({
                urls: imageList,
                current: e.currentTarget.dataset.url
            });
        },
        async openDocument(attachment) {
      // 在App端使用uni-app原生API
            if (process.env.UNI_PLATFORM === 'app-plus') {
                const filePath = await this.downloadAndSaveAttachment(attachment.url);
                console.log('filePath', filePath);
                uni.openDocument({
                filePath: filePath,
                fileType: attachment.type,
                success: () => {},
                fail: () => {}
                });
            } else { // 在Web或小程序中，可能需要提供下载链接
                window.location.href = attachment.url;
            }
        },
        async downloadAndSaveAttachment(url) {
            // 这里是一个简化的下载并保存到本地临时文件的逻辑，实际开发中需要更完整的处理流程
            const {tempFilePath} = await uni.downloadFile({url});
            return tempFilePath;
        },
        addDetail(applyFile){
            this.showAddDetail = true;
            this.modalNameDetail = 'bottomModal'
            this.applyFile = applyFile
            console.log(applyFile,'applyFile',this.applyFile)


        },
        modalNameDetailEmit(e){
            this.modalNameDetail = e
            this.showAddDetail = false;
            
        },


        

        
    }
  }

</script>
<style lang="scss" scoped>
.cu-btn {
  font-size: 16px;
  height: 40px;
}
.foot{
    background: #fff;
}
.cu-item{
  flex-wrap: wrap;
  padding: 15px !important;
}
.title{
    flex-shrink: 0;
}
.grid-square{
    margin-bottom: 0 !important;
}
</style>